<template>
  <el-dialog
    custom-class="com-dialog"
    top="10vh"
    ref="dialogRef"
    v-bind="getBindValue"
    destroy-on-close
    lock-scroll
    :title="title"
    :fullscreen="fullscreen"
    :close-on-press-escape="closeEscape"
    :close-on-click-modal="false"
  >
    <!-- <template #title>
      <slot name="title">
        {{ title }}
      </slot>
      <span class="dialog__icon">
        <el-icon v-if="showFullscreen" @click="toggleFull">
          <Minus v-if="fullscreen" />
          <FullScreen v-else />
        </el-icon>
      </span>
    </template> -->

    <!-- 弹窗内容 -->
    <el-scrollbar
      :class="
        fullscreen && slots.footer
          ? 'com-dialog__content--footer'
          : fullscreen && !slots.footer
          ? 'com-dialog__content--fullscreen'
          : 'com-dialog__content'
      "
    >
      <div class="content__wrap">
        <slot></slot>
      </div>
    </el-scrollbar>

    <template v-if="slots.footer" #footer>
      <slot name="footer"></slot>
    </template>
  </el-dialog>
</template>

<script setup name="ComDialog">
/* eslint-disable */
import { ref, computed, unref, useAttrs, useSlots } from 'vue'
// import { useFullscreen } from './useFullscreen'
// const { sf } = useFullscreen()
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const slots = useSlots()

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  // 是否显示全屏按钮
  showFullscreen: {
    type: Boolean,
    default: false
  },
  // 是否可以拖拽
  draggable: {
    type: Boolean,
    default: true
  },
  // 是否可以通过按下 ESC 关闭 Dialog
  closeEscape: {
    type: Boolean,
    default: false
  },
  dialogWidth: {
    type: String,
    default: ' '
  }
})
const dialogRef = ref(null)
const fullscreen = ref(false)

const getBindValue = computed(() => {
  // const delArr = ['showFullscreen', 'draggable']
  const delArr = []
  const attrs = useAttrs()
  const obj = { ...attrs, ...props }
  for (const key in obj) {
    if (delArr.indexOf(key) !== -1) {
      delete obj[key]
    }
    if (key === 'dialogWidth') {
      obj['width'] = parseFloat(obj[key])
      delete obj[key]
      delete obj['showFullscreen']
      delete obj['closeEscape']
    }
  }
  return obj
})

function toggleFull() {
  fullscreen.value = !fullscreen.value
  // 全屏的时候需要重新定义left top 归0
  if (fullscreen.value && props.draggable) {
    const dragDom = unref(dialogRef)
    dragDom.style = `;left:0px;top:0px;`
    // toggleFullScreen()
  }
}
//  全屏
function toggleFullScreen() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
  } else if (document.exitFullscreen) {
    document.exitFullscreen()
  }
}
</script>
<style lang="scss">
.com-dialog {
  .el-dialog__headerbtn {
    width: 46px;
    height: 46px;
  }
  .el-dialog__header {
    box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
    padding: var(--el-dialog-padding-primary);
    margin-right: 0;
  }
}
</style>
<style lang="scss" scoped>
.dialog__icon {
  position: absolute;
  right: 45px;
  color: #909399;
  cursor: pointer;
  transition: color 0.2s;
  &:hover {
    color: var(--el-color-primary);
  }
}

.com-dialog__content {
  .content__wrap {
    padding-right: 10px;
  }

  :deep(.el-scrollbar__wrap) {
    max-height: 600px; // 最大高度
    overflow-x: hidden; // 隐藏横向滚动栏
  }
}
.com-dialog__content--fullscreen {
  :deep(.el-scrollbar__wrap) {
    height: calc(100vh - 106px); // 最大高度
  }
}
.com-dialog__content--footer {
  :deep(.el-scrollbar__wrap) {
    max-height: calc(100vh - 176px); // 最大高度
  }
}
</style>
